<template>
  <div class="login-page-wrapper">
    <div class="login-box-wrapper">
      <news-page-header>登录</news-page-header>

      <!---->
      <div class="alert-shadow" v-show="notetype">
        <div class="alert-content" v-text="msg"></div>
      </div>
      <!---->
      <div class="header-wrapper">
        <img class="logo-img" :src="require('@/assets/img/icon/logo.png')" />
      </div>
      <header class="box-title">账号密码登录</header>
      <div class="passport-box input-box">
        <div class="passport-content content">
          <input
            autocomplete="off"
            type="text"
            class="passport"
            v-model.trim="logUsername"
            @blur="checkName"
          />
          <i class="cancel" v-show="logUsername.length" @click="clearUser"></i>
        </div>
        <div class="note" v-show="!logUsername.length">请输入账号</div>
      </div>
      <div class="password-box input-box">
        <div class="password-content content">
          <input autocomplete="off" type="password" class="password" v-model.trim="logPassword" />
          <i class="cancel" v-show="logPassword.length" @click="clearPassword"></i>
        </div>
        <div class="note" v-show="!logPassword.length">请输入密码</div>
      </div>
      <!---->
      <div class="should-know">
        <span class="checkbox knew" @click="toChangeInputColor" v-if="isAgree">
          <em>L</em>
        </span>
        <span class="checkbox" @click="toChangeInputColor" v-else>
          <em>L</em>
        </span>
        <span class="content">
          我已阅读并同意
          <a href="#">服务协议</a>
          和
          <a href="#">手机搜狐隐私政策</a>
        </span>
      </div>

      <div class="start-use active" @click="login" v-if="isStrat">登录账号</div>
      <div class="start-use" v-else>登录账号</div>
      <div class="switch-and-forget">
        <div class="switch-method" @click="toRegister">
          <i class="icon i-switch"></i>手机号注册
        </div>
        <a href="#" class="forget-password">忘记密码</a>
      </div>
      <div class="third-method">
        <div class="logo-list">
          <div class="logo qq"></div>
          <div class="logo weibo"></div>
          <!---->
        </div>
        <div class="help">
          <a href="#">帮助中心</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/css/registerCss/register.css";
import newsPageHeader from "../news/newsPageHeader";

export default {
  data() {
    return {
      notetype: false,
      isAgree: true,
      isStrat: false,
      msg: "",
      logUsername: "",
      logPassword: ""
    };
  },
  components: {
    newsPageHeader
  },
  methods: {
    clearUser() {
      this.logUsername = "";
      // this.userIsOk = false;
      this.isAgree = false;
    },
    clearPassword() {
      this.logPassword = "";
      // this.userIsOk = false;
      this.isAgree = false;
    },
    toChangeInputColor() {
      this.isAgree = !this.isAgree;
      if (this.isAgree && this.logUsername && this.logPassword) {
        this.isStrat = true;
      }
    },
    toRegister() {
      this.$router.push({ name: "register" });
    },
    async login() {
      //登录功能
      if (this.logUsername && this.logPassword && this.isAgree) {
        let { data } = await this.$axios.get(
          "http://localhost:9394/users/login",
          {
            params: {
              username: this.logUsername,
              password: this.$md5(this.logPassword),
              keep: this.isAgree
            }
          }
        );
        // window.console.log(data);
        if (data.type) {
          //登陆成功：如果有上一页，回到上一页，否则回到首页
          localStorage.setItem("sohuToken", data.token);
          localStorage.setItem("sohuUsername", this.logUsername);
          localStorage.setItem("sohuPhone", data.phone);

          this.msg = "登录成功，即将跳转";
          this.notetype = true;

          setTimeout(() => {
            this.logUsername = "";
            this.logPassword = "";
            this.notetype = false;
            this.$router.push({ name: "userCenter" });
          }, 2000);
        } else {
          this.msg = "登录失败，请正确输入";
          this.notetype = true;

          setTimeout(() => {
            this.notetype = false;
          }, 2000);
        }
      } else {
        this.msg = "填写有误，请正确输入";
        this.notetype = true;

        setTimeout(() => {
          this.notetype = false;
        }, 2000);
      }
    },
    async checkName() {
      let { data } = await this.$axios.get(
        "http://localhost:9394/users/checkname",
        {
          params: {
            username: this.logUsername
          }
        }
      );
      // window.console.log(data);
      if (data.type) {
        //用户名不存在
        this.notetype = true;
        this.msg = "该用户名不存在，请注册";

        setTimeout(() => {
          this.notetype = false;
        }, 2000);
      } else {
        //已存在，可以登录
        this.notetype = true;
        this.msg = "该用户名已注册，可以登录";

        setTimeout(() => {
          this.notetype = false;
        }, 2000);
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.isAgree = false;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
